<template>
  <div class="system-user-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <el-row>
          <el-col :span="5">
            <el-form-item label="公司/客户名">
              <el-input
                size="default"
                placeholder="请输入商品名"
                style="max-width: 180px"
                v-model="state.name"
              >
              </el-input></el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="请选择时间">
              <el-date-picker
                v-model="state.time"
                type="daterange"
                start-placeholder="开始时间"
                size="default"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                end-placeholder="结束时间"
            /></el-form-item>
          </el-col>

          <el-col :span="2">
            <el-form-item label="  ">
              <el-button
                size="default"
                type="primary"
                class="ml10"
                @click="getTableData()"
              >
                <el-icon>
                  <ele-Search />
                </el-icon>
                查询
              </el-button>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="  ">
              <el-button
                size="default"
                type="primary"
                class="ml10"
                @click="exportExcel()"
              >
                <el-icon>
                  <ele-Search />
                </el-icon>
                导出
              </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
      <el-table
        id="tableData"
        :data="state.tableData.data"
        v-loading="state.tableData.loading"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="序号"
          show-overflow-tooltip
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderId"
          label="订单编号"
          show-overflow-tooltip
          align="center"
        ></el-table-column>

        <el-table-column
          prop="companyName"
          label="客户名称"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="companyMoney"
          label="客户余额"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderTime"
          label="订单时间"
          width="160"
          show-overflow-tooltip
          align="center"
        ></el-table-column>

        <el-table-column
          prop="goodsName"
          label="商品名称"
          width="160"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goodsUnit"
          label="单位"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goodsPrice"
          label="单价"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="数量"
          show-overflow-tooltip
          align="center"
        ></el-table-column>

        <el-table-column
          prop="money"
          label="金额"
          show-overflow-tooltip
          align="center"
        ></el-table-column>

        <el-table-column
          prop="carrier"
          label="送货人"
          show-overflow-tooltip
          align="center"
        ></el-table-column>

        <el-table-column
          prop="deliverTel"
          label="送货人电话"
          width="160"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" text @click="onOpenEdit('edit', scope.row)">修改</el-button>
            <el-button size="small" text @click="onRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange"
        class="mt15"
        :pager-count="5"
        :page-sizes="[10, 20, 30]"
        v-model:current-page="state.tableData.param.pageNum"
        background
        v-model:page-size="state.tableData.param.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.tableData.total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { get_details_list } from "/@/api/details/index";
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
// 引入组件
// 定义变量内容
const goodsDialogFormRef = ref();
const state = reactive<any>({
  name: "",
  time: ["", ""],
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
});
const exportExcel = () => {
  const titleArr = [
    "ID",
    "订单标号",
    "订单时间",
    "客户名称",
    "客户地址",
    "客户电话",
    "客户余额",
    "商品",
    "单位",
    "单价",
    "数量",
    "金额",
    "订单总计",
    "送货人电话",
    "送货人",
    "接货人",
    "地址",
    "备注",
  ]; //表头第一行从左到右
  const fields = [
    "id",
    "orderId",
    "orderTime",
    "companyName",
    "companyAddress",
    "companyTel",
    "companyMoney",
    "goodsName",
    "goodsUnit",
    "goodsPrice",
    "num",
    "money",
    "amount",
    "deliverTel",
    "carrier",
    "receiving",
    "address",
    "note",
  ]; //表头第一行从左到右
  let data = new Array();

  data = state.tableData.data.map((obj: any) => {
    return fields.map((field) => {
      return obj[field];
    });
  });
  data.splice(0, 0, titleArr);
  // fields为英文字段表头,一般不需要，需要直接把下面注释打开即可
  // data.splice(0, 0, fields);

  const ws = XLSX.utils.aoa_to_sheet(data);
  const wb = XLSX.utils.book_new();
  // 此处隐藏英文字段表头
  let wsrows = [{ hidden: true }];
  ws["!rows"] = wsrows; // ws - worksheet
  XLSX.utils.book_append_sheet(wb, ws, "知恩商贸");
  /* generate file and send to client */
  XLSX.writeFile(wb, "知恩商贸" + ".xls");
};
// 初始化表格数据
const getTableData = () => {
  state.tableData.loading = true;
  if (state.time == null) {
    state.time = ["", ""];
  }
  get_details_list(
    state.name,
    state.time[0],
    state.time[1],
    state.tableData.param.pageNum,
    state.tableData.param.pageSize
  ).then((res) => {
    state.tableData.loading = false;
    state.tableData.data = res.data.records;
    state.tableData.total = res.data.total;
  });
};

// 删除用户
// const onRowDel = (row: any) => {
//   ElMessageBox.confirm(`此操作将永久删除商品：“${row.name}”，是否继续?`, "提示", {
//     confirmButtonText: "确认",
//     cancelButtonText: "取消",
//     type: "warning",
//   })
//     .then(() => {
//       del(row.id).then((res) => {
//         if (res.code == 0) {
//           ElMessage.success(res.msg);
//           getTableData();
//         }
//       });
//     })
//     .catch(() => { });
// };
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getTableData();
};
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }
  }
}
</style>
